<template>
  <div>
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>公司管理</a-breadcrumb-item>
          <a-breadcrumb-item>公司列表</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <a-table
          :columns="columns"
          rowClassName="items"
          :key="new Date().getTime()"
          :loading="tableLoading"
          :scroll="{  y: 'calc(100vh - 165px)' }"
          rowKey="id"
          :pagination="false"
          :data-source="tableData"
          size="small"
          default-expand-all-rows
          style="height:calc(100vh - 215px)" sticky bordered>
        <template #bodyCell="{ column,text,record,index }">
          <template v-if="column.dataIndex==='status' && record.code == 'system'">
            <a-switch v-model:checked="record.status" @change="handleChangeUpdate(record,'status')"

                      :checked-value="1"
                      :un-checked-value="0"
                      checked-children="激活中"
                      un-checked-children="未激活"/>
          </template>

          <template v-if="column.dataIndex==='status' && record.code == 'department'">
            <a-switch v-model:checked="record.status" @change="handleChangeUpdateDepartment(record,'status')"

                      :checked-value="1"
                      :un-checked-value="0"
                      checked-children="激活中"
                      un-checked-children="未激活"/>
          </template>

          <template v-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <span class="mr5" v-if="record.code == 'system'">
              <a-button type="primary"  size="small" @click="handleEditOpen(record)"> <template
                  #icon><EditOutlined style="font-size:12px"/></template>编辑公司</a-button>
              </span>
              <span class="mr5" v-if="record.code == 'system'">
              <a-button type="primary"  size="small" @click="handleAddDepartmentOpen(record)"> <template
                  #icon><PlusOutlined/></template>添加部门</a-button>
              </span>
              <span class="mr5" v-if="record.code == 'department'">
              <a-button type="primary"  size="small" @click="handleEditDepartmentOpen(record)"> <template
                  #icon><EditOutlined style="font-size:12px"/></template>编辑部门</a-button>
              </span>
              <span class="mr5" v-if="record.code == 'department'">
              <a-button type="primary"  size="small" @click="handleAddChildrenDepartmentOpen(record)"> <template
                  #icon><PlusOutlined/></template>添加子部门</a-button>
              </span>
              <a-popconfirm title="你确定删除吗?"  v-if="record.code == 'system'" @confirm="handleDelete(record.id)">
                <a-button type="primary"  size="small" danger>
                  <template #icon>
                    <CloseOutlined
                        style="font-size:12px"/>
                  </template>
                  删除
                </a-button>
              </a-popconfirm>
              <a-popconfirm title="你确定删除吗?" v-if="record.code == 'department'" @confirm="handleDeleteDepartment(record.id)">
                <a-button type="primary"  size="small" danger>
                  <template #icon>
                    <CloseOutlined
                        style="font-size:12px"/>
                  </template>
                  删除
                </a-button>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
      <add-system ref="addRef" @success="handleLoadData"></add-system>
      <add-department ref="addDepartmentRef" @success="handleLoadData"></add-department>
    </div>
  </div>
</template>
<script setup>
import AddSystem from "./compoments/AddSystem.vue";
import AddDepartment from "./compoments/AddDepartment.vue";

const addRef = ref(null)
const addDepartmentRef = ref(null)
const searchFormRef = ref(null)
const tableLoading = ref(false)
const addLoading = ref(false)
const total = ref(0)
const tableData = ref([]);
const pageSizeOptions = ref(['15', '20', '30', '40', '50']);
const queryParams = reactive({
  pageNo: 1,
  pageSize: 15,
  status: null,
  keyword: ''
})

const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    align: "center",
    fixed: 'left',
    customRender: ({text, record, index}) => index + 1
  },
  {title: '公司名称', width: 200, dataIndex: 'name', align: "center", fixed: 'left'},
  {title: '状态', dataIndex: 'status', width: 150, align: "center"},
  {title: '创建时间', dataIndex: 'createTime', width: 150, align: "center"},
  {title: '更新时间', dataIndex: 'updateTime', width: 150, align: "center"},
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    align: "center",
    width: 240,
  },
];


/**
 * 查询列表数据
 */
const handleLoadData = async () => {
  try {
    tableLoading.value = true
    const resp = await useGetAdminCurrentSystemApi(queryParams)
    tableLoading.value = false
    tableData.value = [resp.data]
    total.value = resp.data.total
  } catch (e) {
    tableLoading.value = false
  }
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1;
  handleLoadData()
}

const handleReset = () => {
  searchFormRef.value.resetFields()
  handleLoadData()
}

// 修改状态
const handleChangeUpdate = async (record, field) => {
  await useUpdateStatusApi({id: record.id, field: field, value: record[field]})
  useMessage().success("操作成功!")
}

// 修改状态
const handleChangeUpdateDepartment = async (record, field) => {
  await useUpdateStatusDepartmentApi({id: record.id, field: field, value: record[field]})
  useMessage().success("操作成功!")
}

/**
 * 删除逻辑
 * @param id
 * @returns {Promise<void>}
 */
const handleDelete = async (id) => {
  try {
    await useDelAdminSystemByIdApi(id)
    notification.destroy()
    notification.success({
      "message": "提示",
      "description": "删除成功"
    })
    handleLoadData()
  }catch (e){
    useMessage().error(e.msg)
  }
}

/**
 * 删除逻辑
 * @param id
 * @returns {Promise<void>}
 */
const handleDeleteDepartment = async (id) => {
  try {
    await useDelAdminSystemDepartmentByIdApi(id)
    notification.destroy()
    notification.success({
      "message": "提示",
      "description": "删除成功"
    })
    handleLoadData()
  }catch (e){
    useMessage().error(e.msg)
  }
}

// 打开添加
const handleAddOpen = () => {
  addRef.value.handleOpen()
}

// 编辑处理
const handleEditOpen = (record) => {
  addRef.value.handleOpen({...record})
}

// 打开添加
const handleAddDepartmentOpen = (record) => {
  addDepartmentRef.value.handleSystemOpen(record)
}


// 打开添加
const handleAddChildrenDepartmentOpen = (record) => {
  addDepartmentRef.value.handleOpen(record)
}

// 编辑处理
const handleEditDepartmentOpen = (record) => {
  addDepartmentRef.value.handleEditOpen({...record})
}

onMounted(() => {
  handleLoadData()
})

</script>
<style scoped>
.ant-table-row-level-0,.ant-table-row-level-0 td{background: #f8f8f8!important;}
</style>